<template>
	<view>
		<view>
			<!-- 广场 -->
			<Tab :tabbar="1"></Tab>
		</view>
		<!--  -->
		<u-icon @click="getGoodsSearch" class="icon_search" size="25px" color="#fff" name="search"></u-icon>
		<!-- tabs -->
		<el-tabs class="lfy_tab_all" stretch v-model="activeName" @tab-click="handleClick">
			<!-- tab -->
			<el-tab-pane label="淘货" name="first">
				<!--  -->
				<el-tabs class="lfy_tab_first" stretch v-model="activeFirst" @tab-click="handleClick">
					<el-tab-pane label="推荐" name="firstOne">
						<!-- 内容 -->
						<view class="container_mar">
							<view class="lfy_goods_box" v-for="item in goods" :key="item.id">
								<div class="goods">
									<p class="goods_title">
										<span class="name">{{item.name}}</span>
										<span class="time">发布时间：{{item.issue}}</span>
									</p>
									<p class="goods_tags">
										<span class="type">{{item.type}}</span>
										<span class="price">¥{{item.price}}</span>
									</p>
									<p class="goods_introduce">{{item.introduce}}</p>
									<div @click="getGoodsDetails(item)" class="goods_img_box">
										<img :src="item.goodsImg01" alt="" />
										<img :src="item.goodsImg02" alt="" />
										<img :src="item.goodsImg03" alt="" />
									</div>
									<div class="seller_info">
										<span class="info_left">
											<img class="seller_head_portrait" :src="item.headPortrait" alt="">
											<span class="fans_box">
												<p class="seller_name">{{item.sellerName}}</p>
												<span class="fans">粉丝:{{item.fans}}</span>
												<span>关注:{{item.follow}}</span>
											</span>
										</span>
										<span class="info_right">
											<span>
												<i @click="thumbsUp(item)" class="el-icon-thumb"></i>
												{{item.thumb}}
											</span>
											<span>
												<i class="el-icon-view"></i>
												{{item.see}}
											</span>
											<span>
												<i class="el-icon-chat-dot-round"></i>
												{{item.evaluate}}
											</span>
										</span>
									</div>
								</div>
							</view>
						</view>
					</el-tab-pane>
					<el-tab-pane label="最新" name="firstTwo">最新</el-tab-pane>
					<el-tab-pane label="数码产品" name="firstThree">数码产品</el-tab-pane>
					<el-tab-pane label="图书文具" name="firstFour">图书文具</el-tab-pane>
					<el-tab-pane label="服饰鞋包" name="firstFive">服饰鞋包</el-tab-pane>
					<el-tab-pane label="美妆闲置" name="firstSix">美妆闲置</el-tab-pane>
					<el-tab-pane label="体育用品" name="firstSeven">体育用品</el-tab-pane>
				</el-tabs>
			</el-tab-pane>
			<el-tab-pane label="话题" name="second">
				<el-tabs class="lfy_tab_first" stretch v-model="activeSecond" @tab-click="handleClick">
					<el-tab-pane label="推荐" name="secondOne">
						<!-- 内容 topic -->
						<view class="container_mar">
							<view class="lfy_goods_box" v-for="item in topic" :key="item.id">
								<div class="goods topic">
									<view class="info_flex">
										<span class="info_left">
											<img class="topic_head_portrait" :src="item.headPortrait" alt="">
											<span class="fans_box">
												<p class="seller_name">{{item.authorName}}</p>
												<span class="fans">粉丝:{{item.fans}}</span>
												<span>关注:{{item.follow}}</span>
											</span>
										</span>
										<span class="time">发布时间：{{item.issue}}</span>
									</view>
									<!-- @click="getGoodsDetails(item)" -->
									<div @click="getTopicDetails(item)" class="topic_img_box">
										<img :src="item.topicImg" alt="" />
									</div>
									<p class="goods_introduce">{{item.introduce}}</p>
									<div class="topic_seller_info">

										<span>
											<i @click="thumbsUpTopic(item)" class="el-icon-thumb"></i>
											{{item.thumb}}
										</span>
										<span>
											<i class="el-icon-view"></i>
											{{item.see}}
										</span>
										<span>
											<i class="el-icon-chat-dot-round"></i>
											{{item.evaluate}}
										</span>
									</div>
								</div>
							</view>
						</view>
					</el-tab-pane>
					<el-tab-pane label="最新" name="secondTwo">最新</el-tab-pane>
					<el-tab-pane label="最热" name="secondThree">数码产品</el-tab-pane>
				</el-tabs>
			</el-tab-pane>
			<el-tab-pane label="公益" name="third">
				<view class="container_mar">
					<view class="lfy_goods_box">
						<!--  -->
						<view @click="getActivityDetails" class="public">
							<img src="http://127.0.0.1:7001/public/lfyimg/lfy_public_activity.png" alt="">
						</view>
						<!-- title -->
						<p class="public_title">
							<span></span>
							公益新闻
						</p>
						<!--  -->
						<div v-for="item in public" :key="item.id" class="goods news">
							<view @click="getNewsDetails(item)" class="news_img_box">
								<img :src="item.newsImg" alt="">
								<p class="date">{{item.riqi}}</p>
							</view>
							<view class="news_info">
								<p class="news_title">{{item.newsTitle}}</p>
								<p class="news_con">{{item.newsContent}}</p>
								<p class="info_icon">
									<span>
										<i @click="thumbsUpPublic(item)" class="el-icon-thumb"></i>
										{{item.thumb}}
									</span>
									<span>
										<i class="el-icon-view"></i>
										{{item.see}}
									</span>
									<span>
										<i class="el-icon-chat-dot-round"></i>
										{{item.evaluate}}
									</span>
								</p>
							</view>
						</div>
					</view>
				</view>
			</el-tab-pane>
		</el-tabs>
	</view>
</template>
<script>
	import Tab from '../../components/tab.vue'
	export default {
		data() {
			return {
				activeName: 'first',
				activeFirst: 'firstOne',
				activeSecond: 'secondOne',
				goods: [],
				topic: [],
				public: []
			}
		},
		onShow() {
			const square = getApp().globalData.square
			// console.log(square)
			this.activeName = square
			
			this.$api.lfygoods().then(res => {
					this.goods = res.data
				}),
				this.$api.lfytopic().then(res => {
					this.topic = res.data
				}),
				this.$api.lfypublic().then(res => {
					this.public = res.data
				})
		},
		methods: {
			// 淘货-点赞
			thumbsUp(item) {
				console.log(Number(item.thumb) + 1)
				console.log(item.state)
				if (item.state == 0) {
					this.$api.upGoods({
						id: item.id,
						thumb: Number(item.thumb) + 1,
						state: 1
					}).then((res) => {

						console.log(res)
						this.$api.lfygoods().then(res => {
							this.goods = res.data
						})
					})
				} else {
					this.$api.upGoods({
						id: item.id,
						thumb: Number(item.thumb) - 1,
						state: 0
					}).then((res) => {
						console.log(res)
						this.$api.lfygoods().then(res => {
							this.goods = res.data
						})
					})
				}
			},
			// 话题-点赞
			thumbsUpTopic(item) {
				console.log(Number(item.thumb) + 1)
				console.log(item.state)
				if (item.state == 0) {
					this.$api.upTopic({
						id: item.id,
						thumb: Number(item.thumb) + 1,
						state: 1
					}).then((res) => {

						console.log(res)
						this.$api.lfytopic().then(res => {
							this.topic = res.data
						})
					})
				} else {
					this.$api.upTopic({
						id: item.id,
						thumb: Number(item.thumb) - 1,
						state: 0
					}).then((res) => {
						console.log(res)
						this.$api.lfytopic().then(res => {
							this.topic = res.data
						})
					})
				}
			},

			// 公益-点赞
			thumbsUpPublic(item) {
				console.log(Number(item.thumb) + 1)
				console.log(item.state)
				if (item.state == 0) {
					this.$api.upPublic({
						id: item.id,
						thumb: Number(item.thumb) + 1,
						state: 1
					}).then((res) => {

						console.log(res)
						this.$api.lfypublic().then(res => {
							this.public = res.data
						})
					})
				} else {
					this.$api.upPublic({
						id: item.id,
						thumb: Number(item.thumb) - 1,
						state: 0
					}).then((res) => {
						console.log(res)
						this.$api.lfypublic().then(res => {
							this.public = res.data
						})
					})
				}
			},

			// 
			go() {
				uni.switchTab({
					url: '/pages/Home/Home'
				})
			},
			// tabs
			handleClick(tab, event) {
				// console.log(event);
			},
			// 路由-产品详情
			getGoodsDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/square/lfyGoodsDetails?id=${item.id}`
				})
			},
			// 路由-话题详情
			getTopicDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/square/lfyTopicDetails?id=${item.id}`
				})
			},
			// 路由-新闻详情
			getNewsDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/square/lfyNewsDetalis?id=${item.id}`
				})
			},
			// 路由-活动详情
			getActivityDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/square/lfyActivityDetails'
				})
			},
			// 路由-搜索
			getGoodsSearch(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/square/lfyGoodsSearch'
				})
			},

		},
		components: {
			Tab
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	::v-deep .el-tabs__item.is-active {
		color: #28d2d1;
	}

	::v-deep .el-tabs__active-bar {
		background-color: #28d2d1;
	}

	::v-deep .el-tabs__item {
		color: #666;
		font-size: 28upx;
		font-weight: 400;
	}

	::v-deep .lfy_tab_first .el-tabs__header {
		box-shadow: 0upx 10upx 40upx #edeaef;
	}

	::v-deep .lfy_tab_first .el-tabs__nav-wrap::after {
		display: none;
	}

	::v-deep .lfy_tab_all .el-tabs__header {
		margin: 0;
	}

	::v-deep .lfy_tab_first .el-tabs__item {
		font-size: 20upx;
	}

	::v-deep .lfy_tab_first .el-tabs__nav-wrap.is-scrollable {
		padding: 0 34upx 0 60upx;
	}

	// 搜索
	.icon_search {
		position: fixed;
		top: 20upx;
		right: 30upx;
		z-index: 999;
	}

	// 淘货
	// 内容
	.container_mar {
		margin-bottom: 200upx;
	}

	.lfy_goods_box {
		padding: 40upx 40upx 0;
	}

	.goods {
		padding: 30upx;
		background-color: #fff;
		box-shadow: 0upx 10upx 40upx #edeaef;
		border-radius: 20upx;
	}

	.goods_title {
		display: flex;
		justify-content: space-between;
		height: 50upx;
		line-height: 50upx;
	}

	.name {
		color: #333;
		font-size: 32upx;
		font-weight: 500;
	}

	.time {
		color: #999;
		font-size: 20upx;
	}

	.goods_tags {
		height: 50upx;
		line-height: 50upx;
	}

	.goods_tags .type {
		color: #2ed8c4;
		border: 2upx solid #2ed8c4;
		padding: 0 20upx;
		font-size: 20upx;
	}

	.goods_tags .price {
		color: #ff7098;
		border: 2upx solid #ff7098;
		padding: 0 20upx;
		font-size: 20upx;
		margin-left: 20upx;
	}

	.goods_introduce {
		height: 50upx;
		line-height: 50upx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods_img_box {
		display: flex;
		justify-content: space-between;
		margin: 30upx 0;
	}

	.goods_img_box img {
		width: 30%;
	}

	.seller_info {
		display: flex;
		justify-content: space-between;
		height: 100upx;
		border-top: 2upx solid #dddddd;
		padding-top: 30upx;
	}

	.seller_head_portrait {
		width: 100upx;
	}

	.seller_name {
		color: #666;

	}

	.fans_box {
		color: #999;
		font-size: 25upx;
		float: right;
		margin: 20upx 0 0 20upx;
	}

	.fans_box span {
		font-size: 20upx;

	}

	.fans_box .fans {
		margin-right: 20upx;
	}

	.info_right {
		color: #999;
		font-size: 22upx;
		line-height: 170upx;
	}

	.info_right span {
		margin-left: 20upx;
	}

	.info_right span i {
		margin-right: 10upx;
	}

	// 话题
	// 内容
	.topic_head_portrait {
		height: 100%;
	}

	.topic .fans_box {
		margin-top: 5upx;
	}

	.info_flex {
		display: flex;
		justify-content: space-between;
		height: 70upx;
	}


	.seller_name {
		color: #666;
		font-size: 25upx;
	}

	.fans_box {
		color: #999;
		font-size: 18upx;
		margin-left: 20upx;
		float: right;
	}


	.fans_box .fans {
		margin-right: 20upx;
	}

	.topic_img_box {
		margin-top: 20upx;
	}

	.topic_img_box img {
		width: 100%;
	}

	.topic .goods_introduce {
		color: #666;
		height: 70upx;
		line-height: 70upx;
	}

	.topic_seller_info {
		display: flex;
		justify-content: space-around;
		border-top: 2upx solid #dddddd;
		padding-top: 20upx;
	}

	.topic_seller_info span {
		color: #999;
		font-size: 22upx;
	}

	.topic_seller_info span i {
		margin-right: 10upx;
	}

	// 公益
	// 内容
	.public {
		// width: 100%;
		margin-bottom: 50upx;
	}

	.public img {
		width: 100%;
		border-radius: 20upx;
	}

	// title
	.public_title {
		color: #333;
		font-size: 32upx;
		padding: 0 30upx;
		height: 40upx;
		margin: 20upx 0;
	}

	.public_title span {
		display: inline-block;
		width: 10upx;
		height: 100%;
		background-color: #28d2d1;
		border-radius: 10upx;
		float: left;
	}

	// 
	.news {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30upx;
	}

	.news_img_box {
		width: 50%;
	}

	.news_img_box img {
		width: 100%;
		height: 100%;
	}

	.date {
		font-size: 20upx;
		color: #999;
		line-height: 0.5;
		// height: 30upx;
		// line-height: 30upx;
	}

	.news_info {
		width: 45%;
	}

	.news_title {
		color: #666;
		font-size: 30upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.news_con {
		color: #999;
		font-size: 22upx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		margin: 20upx 0;
	}

	.info_icon {
		color: #999;
		font-size: 14px;
		text-align: right;
	}

	.info_icon span {
		// margin-left: 20upx;
		text-align: right;
	}

	.info_icon span i {
		margin-right: 10upx;
	}
</style>
